<template>
	<view class="content">
		<view>
			<scroll-view class="left" scroll-y="true">
				<view class="leftText" v-for="item in navList" :key="item.id">
					<text @click="clickNav($event)" :id="item.title" :tabindex=item.id> {{item.title}} </text>
				</view>
			</scroll-view>
		</view>
		<view>
			<view class="right">
				<view class="nav">
					<view tabindex="1" @click="getAnyData">综合</view>
					<view tabindex="2" @click="getBuyData">销量</view>
					<view tabindex="3" @click="getNewgoodData">新品</view>
					<view tabindex="4" @click="getPriceData">价格 <view class="pricess"> <view >
					<image class="on" src="../../static/升序.png" mode="widthFix" @click="ons"></image> 
					<view > </view> <image  class="up" src="../../static/降序.png" mode="widthFix" @click="unders"></image> 
					 </view>  </view></view>
				</view>
				<scroll-view class="rightTwobox" scroll-y="true">
					<view class="rightContent" v-for="item in imgList" :key="item.id">
						<view>
							<image :src="$host+item.src" mode="widthFix"></image>
						</view>
						<view class="rightText">
							<text class="title">
								{{item.title}}
							</text>
							<view class="moneybox">
								<view class="money">￥{{item.money}}<text>.00起</text></view>
								<view class="btn" @click="tobuy" :data-index="{count:item.count,id:item.id,title:item.title,money:item.money,src:item.src}">选规格</view>
							</view>
						</view>
					</view>
					
																		

				</scroll-view>






			</view>
		</view>

	</view>

</template>

<script>

	export default {
		data(){
			 return {				
				 imgList:[],
				 $host:this.$host,
				 class:"生日蛋糕",
				 navList:[
				 {
				 					 id:1,
				 					 title:"生日蛋糕"
				 },
				 {
				 					 id:2,
				 					 title:"甜食"
				 },
				 {
				 					 id:3,
				 					 title:"常温零食"
				 },
				 {
				 					 id:4,
				 					 title:"面包"
				 },
				 {
				 					 id:5,
				 					 title:"口味蛋糕"
				 },
				 {
				 					 id:6,
				 					 title:"简约四寸"
				 },
			
				 {
				 					 id:8,
				 					 title:"饮品"
				 },
				 {
				 					 id:9,
				 					 title:"特色周边"
				 }
					 
				 
				 ]
			 }
		},
		onLoad(){
			 this.$request("/getClassData","post",{}).then(res=>{
				      this.imgList=res.data
			 })
		},
		methods:{
			unders(){
				this.$request("/unders","post",{}).then(res=>{
									    this.imgList=res.data.filter(item=>item.navTitle==this.class)
				})
			},
			ons(){
				 this.$request("/on","post",{}).then(res=>{
					    this.imgList=res.data.filter(item=>item.navTitle==this.class)
				 })
			},
			tobuy(e){
			let id=e.currentTarget.dataset.index.id
			let money=e.currentTarget.dataset.index.money
			let title=e.currentTarget.dataset.index.title
			let src=e.currentTarget.dataset.index.src
            let count=e.currentTarget.dataset.index.count
				 uni.navigateTo({
				 	url:`/pages/shopData/index?id=${id}&title=${title}&money=${money}&src=${src}`
				 })
			}
			,
			
			// 获取前面标题上的数据
			 getAnyData(){
				 this.$request("/getClassData","post",{}).then(res=>{
					             this.imgList=[]
				 				      this.imgList=res.data.filter(item=>item.navTitle==this.class)
				 })
			 },
			 getBuyData(){
				 this.$request("/getBuyData","post",{host:"host"}).then(res=>{
					                   this.imgList=[]
				 				     this.imgList=res.data.filter(item=>item.navTitle==this.class)
									  // console.log(res.data)
				 })
			 },
			 getNewgoodData(){
				 this.$request("/getNewData","post",{new:"new"}).then(res=>{
				 					                   this.imgList=[]
				 				                this.imgList=res.data.filter(item=>item.navTitle==this.class)
				 									  // console.log(res.data)
				 })
			 },
			 getPriceData(){
				 
			 },
			 
			 // 点击导航栏左边
			 clickNav(obj){
				
				this.class=obj.target.id
			   this.$request("/getNavData","post",{"sweet":obj.target.id}).then(res=>{
			   					                   this.imgList=[]
			   				                     this.imgList=res.data
			   									
			   })
			   
			   
			 }
			 
			 
		}

	}
</script>

<style>
	.pricess image{
		   width: 46rpx;
	}
	.pricess{
		position: relative;
		top: -77rpx;
		left: 47rpx;
	}
	.on{
		position: relative;
		top: 26rpx;
	}
	.up{
		position: relative;
		top: 7rpx;
	}
	.leftText>text:focus{
		color: #fe9a69;
		font-weight: 600;
	}
	.content {
		display: flex;
		height: 100%;
	}

	/* 左边的部分 */
	.left {
		height: 100vh;
		background-color: #f6f6f6;

	}

	.leftText {
		display: flex;
		flex-direction: column;
		position: relative;
		top: -20px;
	}

	.leftText>text {
		margin-top: 28rpx;
		width: 80px;
		text-align: center;
		height: 40px;
		text-align: center;
		line-height: 40px;

	}

	/* 右边的内容 */
	.right {
		display: flex;
		flex-direction: column;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		margin-top: 18rpx;
		height: 10px;


	}
	

	.nav>view {
		width: 40px;
		text-align: center;		
	}
	.nav>view:focus{
		 font-weight: 600;
	}
   
 
   
	.rightContent image {
		width: 180rpx;
	}

	.rightContent {
		display: flex;
	margin-top: 20px;
    position: relative;
	top: -20px;


	}

	.title {
		font-weight: 600;
		font-size: 32rpx;
		margin-left: 24rpx;
		padding-right: 30rpx;
		width: 182px;
	}

	.rightText {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}

	.moneybox {
		display: flex;
		justify-content: space-between;
		width: 205.2px;
	}

	.btn {
		padding: 0rpx 20rpx;
		text-align: center;
		background-color: #fe9a69;
		border-radius: 20rpx;
		height: 22px;
		color: white;
		line-height: 22px;
		font-size: 28rpx;
		margin-right: 20px;
	}

	.money {
		color: #fe9a69;
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.money>text {
		font-size: 18rpx;
	}
	.rightTwobox{
		height:511.11px;
		margin-top: 50rpx;
	}
</style>
